"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { ArrowLeft, Globe } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

export default function CreateCompetitionPage() {
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()
  
  const [formData, setFormData] = useState({
    title: '',
    platform: '',
    description: '',
    rules: '',
    startDate: '',
    endDate: '',
    registrationDeadline: '',
    maxTeamSize: '4',
    prize: '',
    category: '',
    difficulty: 'intermediate',
    tags: [],
    requirements: '',
    isPublic: true,
    allowIndividual: true,
    allowTeam: true
  })

  const [newTag, setNewTag] = useState('')

  const handleInputChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const addTag = () => {
    if (newTag.trim() && !formData.tags.includes(newTag.trim())) {
      setFormData(prev => ({
        ...prev,
        tags: [...prev.tags, newTag.trim()]
      }))
      setNewTag('')
    }
  }

  const removeTag = (tagToRemove) => {
    setFormData(prev => ({
      ...prev,
      tags: prev.tags.filter(tag => tag !== tagToRemove)
    }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsLoading(true)

    // 模拟提交过程
    await new Promise(resolve => setTimeout(resolve, 2000))

    toast({
      title: "🚀 竞赛发布成功！",
      description: "正在进入宇宙审核中...",
    })

    // 模拟审核过程
    setTimeout(() => {
      toast({
        title: "✅ 审核通过！",
        description: "你的竞赛已成功发布到平台",
      })
      
      // 跳转回首页
      setTimeout(() => {
        window.location.href = '/'
      }, 1000)
    }, 2000)

    setIsLoading(false)
  }

  return (
    <div className="min-h-screen pt-20">
        <div className="container mx-auto px-4 py-8 max-w-4xl">
        {/* 返回按钮 */}
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          className="mb-6"
        >
          <Link href="/">
            <Button variant="ghost" size="sm" className="gap-2">
              <ArrowLeft className="w-4 h-4" />
              返回首页
            </Button>
          </Link>
        </motion.div>

        {/* 头部 */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-8"
        >
          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
            发布社区竞赛
          </h1>
          <p className="text-xl text-gray-300">
            创建属于你的竞赛，聚集全宇宙的开发者
          </p>
        </motion.div>

        <form onSubmit={handleSubmit}>
          <div className="space-y-8">
            {/* 基本信息 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
            >
              <Card className="glass border-0">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Globe className="w-5 h-5 text-blue-400" />
                    基本信息
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <Label htmlFor="title">竞赛标题 *</Label>
                    <Input
                      id="title"
                      value={formData.title}
                      onChange={(e) => handleInputChange('title', e.target.value)}
                      placeholder="输入一个吸引人的竞赛标题..."
                      className="glass border-0"
                      required
                    />
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="platform">主办平台</Label>
                      <Select value={formData.platform} onValueChange={(value) => handleInputChange('platform', value)}>
                        <SelectTrigger className="glass border-0">
                          <SelectValue placeholder="选择平台" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="hackplay">HackPlay 社区</SelectItem>
                          <SelectItem value="custom">自定义平台</SelectItem>
                          <SelectItem value="school">学校/机构</SelectItem>
                          <SelectItem value="company">企业内部</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="category">竞赛类别</Label>
                      <Select value={formData.category} onValueChange={(value) => handleInputChange('category', value)}>
                        <SelectTrigger className="glass border-0">
                          <SelectValue placeholder="选择类别" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="ai-ml">AI/机器学习</SelectItem>
                          <SelectItem value="web-dev">Web开发</SelectItem>
                          <SelectItem value="mobile">移动开发</SelectItem>
                          <SelectItem value="blockchain">区块链</SelectItem>
                          <SelectItem value="data-science">数据科学</SelectItem>
                          <SelectItem value="game-dev">游戏开发</SelectItem>
                          <SelectItem value="iot">物联网</SelectItem>
                          <SelectItem value="other">其他</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="description">竞赛描述 *</Label>
                    <Textarea
                      id="description"
                      value={formData.description}
                      onChange={(e) => handleInputChange('description', e.target.value)}
                      placeholder="详细描述你的竞赛内容、目标和意义..."
                      className="glass border-0 min-h-[120px]"
                      required
                    />
                  </div>

                  <div>
                    <Label htmlFor="rules">竞赛规则</Label>
                    <Textarea
                      id="rules"
                      value={formData.rules}
                      onChange={(e) => handleInputChange('rules', e.target.value)}
                      placeholder="说明参赛规则、评分标准、提交要求等..."
                      className="glass border-0 min-h-[100px]"
                    />
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            {/* 时间设置 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
            >
              <Card className="glass border-0">
                <CardHeader>
                  <CardTitle>时间设置</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                      <Label htmlFor="startDate">开始时间 *</Label>
                      <Input
                        id="startDate"
                        type="datetime-local"
                        value={formData.startDate}
                        onChange={(e) => handleInputChange('startDate', e.target.value)}
                        className="glass border-0"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="endDate">结束时间 *</Label>
                      <Input
                        id="endDate"
                        type="datetime-local"
                        value={formData.endDate}
                        onChange={(e) => handleInputChange('endDate', e.target.value)}
                        className="glass border-0"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="registrationDeadline">报名截止</Label>
                      <Input
                        id="registrationDeadline"
                        type="datetime-local"
                        value={formData.registrationDeadline}
                        onChange={(e) => handleInputChange('registrationDeadline', e.target.value)}
                        className="glass border-0"
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            {/* 提交按钮 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="flex justify-center"
            >
              <Button
                type="submit"
                size="lg"
                disabled={isLoading}
                className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
              >
                {isLoading ? "发布中..." : "发布竞赛"}
              </Button>
            </motion.div>
          </div>
        </form>
        </div>
      </div>
  )
}
